<template>
	<view class="">
		<view class="box" v-if="showx">
			<view class="top">
				<view class="d_f j_c_s_b">
					<view class="d_f">
						<image src="../../static/laike/local.png" mode="widthFix" style="width: 30rpx;"></image>
						<view class="" style="margin-left: 10rpx;color: white;">
							{{local}}
						</view>
					</view>
					<view class="" style="color: white;">
						访客扫码登记
					</view>
				</view>
				<view class="" style="width: 100%;text-align: center;margin-top: 55rpx;">
					<image src="https://web.78keji.cn/xiaolan/touxiang.png" mode="widthFix" style="width: 108rpx;">
					</image>
					<view class="" style="font-size: 34rpx; color: white;margin-top: 10rpx;">
					{{names}}
					</view>
					<view class="" style="font-size: 34rpx; color:#EFFFF0;margin-top: 14rpx;">
					{{mobile}}
					</view>
				</view>

			</view>
			<view class="" style="padding: 40rpx;" v-if="flag==0">
				<view class="" style="color:#1C1C1C;font-size: 34rpx;font-weight: bold;width: 100%;text-align: center;">
					请选择到访原因
				</view>
				<view class="columnx">
					<template v-for="(item,index) in list ">
						<view :key='index' @tap="changes(item.name)" class="bingding">
							<view class="binding">
								{{item.name}}
							</view>
						</view>
					</template>

				</view>

			</view>
			<view class="" v-if="flag==1" style="padding: 40rpx;">
				<view class="d_f">
					<image src="https://web.78keji.cn/xiaolan/kuaidi/back.png" mode="widthFix" style="width: 23rpx;"
						@click="backs"></image>
					<view class=""
						style="color:#1C1C1C;font-size: 34rpx;font-weight: bold;width: 100%;text-align: center;">
						请选择所属公司
					</view>
				</view>

				<view class="columnx">
					<template v-for="(item,index) in kuaidi ">
						<view :key='index' :class="item.check==true ? 'bindx' : 'bingdingx'"
							@click="kuaidichange(item.id)">
							<image :src='item.img' mode="aspectFill" class="bracelet"></image>
							<view class="" style="color: #080808;margin-top: 10rpx;font-size: 30rpx;">
								{{item.name}}
							</view>
						</view>
					</template>

				</view>
			</view>
			<view class="" v-if="flag==2" style="padding: 40rpx;">
				<view class="d_f">
					<image src="https://web.78keji.cn/xiaolan/kuaidi/back.png" mode="widthFix" style="width: 23rpx;"
						@click="backs"></image>
					<view class=""
						style="color:#1C1C1C;font-size: 34rpx;font-weight: bold;width: 100%;text-align: center;">
						请选择所属公司
					</view>
				</view>
				<view class="columnx">
					<template v-for="(item,index) in waimai ">
						<view :key='index' :class="item.check==true ? 'bindx' : 'bingdingx'" @click="wmchange(item.id)">
							<image :src='item.img' mode="aspectFill" class="bracelet"></image>
							<view class="" style="color: #080808;margin-top: 10rpx;font-size: 30rpx;">
								{{item.name}}
							</view>
						</view>
					</template>

				</view>
			</view>
			<view class="" v-if="flag==3" style="padding: 40rpx;">
				<view class="d_f">
					<image src="https://web.78keji.cn/xiaolan/kuaidi/back.png" mode="widthFix" style="width: 23rpx;"
						@click="backs"></image>
					<view class=""
						style="color:#1C1C1C;font-size: 34rpx;font-weight: bold;width: 100%;text-align: center;">
						填写来访原因（必填）
					</view>

				</view>
				<view class="" style="margin-top: 20rpx;">
					<u-input v-model="reson" @input='inputs' type="textarea" :border="true" height='200'
						placeholder="请填写来访原因" />
				</view>

			</view>
			<view class="" v-if="flag==4" style="padding: 40rpx;">
				<view class="d_f">
					<image src="https://web.78keji.cn/xiaolan/kuaidi/back.png" mode="widthFix" style="width: 23rpx;"
						@click="backs"></image>
					<view class=""
						style="color:#1C1C1C;font-size: 34rpx;font-weight: bold;width: 100%;text-align: center;">
						填写拜访业主信息（选填）
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;">
					<u-input v-model="resons" type="textarea" :border="true" height='200' placeholder="填写拜访业主信息" />
				</view>
			</view>
			<view class="d_f j_c_s_b" style="padding: 40rpx;">
				<view class="" style="color: #333333;font-size: 25rpx;">
					是否驾驶机动车
				</view>
				<u-radio-group v-model="value" active-color="#167BFF">
					<u-radio @change="radioChange" v-for="(item, index) in lists" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		<view class="" style="padding: 24rpx;">
			<keyboard-plate ref="plateNumber" :plateNum.sync='plateNum' @change="getPlateNum" class="keyboard" isShow
				v-if="value=='是'"></keyboard-plate>
		</view>
			<view class="" style="padding: 0 40rpx">
				<u-button type="primary" shape="circle" :disabled='disabled' @click="showx=false">提交登记</u-button>
			</view>


		</view>
		<view class="op" v-if="!showx">
			<view class=" d_f f_d_c a_i_c" style="height: 800rpx;background-color: white;border-radius: 24rpx;">
				<view class="" style="color:#020202 ;font-size: 48rpx;margin-top: 20rpx;">
					访客通行证
				</view>
				<view class="" style="margin-top: 10rpx;font-size: 30rpx;">
					{{local}}
				</view>
				<view class="circle">
					<view class="" style="font-size: 60rpx;color: white;text-align: center;margin-top: 90rpx;">
						请通行
					</view>
					<view class="" style="text-align: center;font-size: 34rpx;margin-top: 34rpx;color: white;">
						{{namex}}
					</view>
				</view>
				<view style="margin-top: 70rpx;font-size: 30rpx;">
					{{time}}
				</view>
				<view class="" style="color: #999999;font-size: 28rpx;margin-top: 10rpx;">
					请展示给门岗以通行，5分钟内有效
				</view>
			</view>
			<view @click="backv" class="d_f a_i_c j_c_s_b" style="height: 103rpx;background: #06CD74;border-radius: 24rpx;margin-top: 28rpx;padding: 0 30rpx;">
					<view class="d_f" >
						<image src="https://web.78keji.cn/xiaolan/waimai/checks.png" mode="widthFix" style="width: 36rpx;"></image>
						<view class="" style="font-size: 32rpx;color: white;margin-left: 16rpx;">
							重选来访原因
						</view>
					</view>
					<view class="">
						<image src="https://web.78keji.cn/xiaolan/waimai/right.png" mode="widthFix" style="width: 24rpx;"></image>
					</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		wxLogin,

	
	} from '../../api/index.js'
	export default {
		data() {
			return {
			
				names:'',
				mobile:"",
				time: '',
				namex: '',
				showx: true,
				resons: '',
				reson: '', //来访原因
				waimai: [{
						name: '饿了么',
						img: 'https://web.78keji.cn/xiaolan/waimai/eleme.png',
						check: false,
						id: '1'
					},
					{
						name: '盒马',
						img: 'https://web.78keji.cn/xiaolan/waimai/hema.png',
						check: false,
						id: '2'
					},
					{
						name: '美团',
						img: 'https://web.78keji.cn/xiaolan/waimai/meituan.png',
						check: false,
						id: '3'
					},
					{
						name: '京东到家',
						img: 'https://web.78keji.cn/xiaolan/waimai/jingdong.png',
						check: false,
						id: '4'
					},

					{
						name: '叮咚买菜',
						img: 'https://web.78keji.cn/xiaolan/waimai/dingdong.png',
						check: false,
						id: '5'
					},
					{
						name: '达达快递',
						img: 'https://web.78keji.cn/xiaolan/waimai/dada.png',
						check: false,
						id: '6'
					},
					{
						name: '肯德基',
						img: 'https://web.78keji.cn/xiaolan/waimai/kengdeji.png',
						check: false,
						id: '7'
					},
					{
						name: '麦当劳',
						img: 'https://web.78keji.cn/xiaolan/waimai/maidanglao.png',
						check: false,
						id: '8'
					},
					{
						name: '其他',
						img: 'https://web.78keji.cn/xiaolan/waimai/qita.png',
						check: false,
						id: '9'
					},
				],

				kuaidi: [{
						name: '申通',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/shentong.png',
						check: false,
						id: '1'


					},
					{
						name: '中通',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/zhongtong.png',
						check: false,
						id: '2'

					},
					{
						name: '圆通',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/yuantong.png',
						check: false,
						id: '3'

					},
					{
						name: '韵达',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/yunda.png',
						check: false,
						id: '4'

					}, {
						name: '顺丰',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/shunfneg.png',
						check: false,
						id: '5'

					}, {
						name: '京东',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/jingdong.png',
						check: false,
						id: '6'

					}, {
						name: '邮政',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/youzheng.png',
						check: false,
						id: '7'

					}, {
						name: '闪送',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/shansong.png',
						check: false,
						id: '8'

					},
					{
						name: '百世',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/baishi.png',
						check: false,
						id: '9'

					}, {
						name: '天天',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/tiantian.png',
						check: false,
						id: '10'

					}, {
						name: '德邦',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/debang.png',
						check: false,
						id: '11'

					}, {
						name: '其他',
						img: 'https://web.78keji.cn/xiaolan/kuaidi/qita.png',
						check: false,
						id: '12'

					},
				],
				flag: 0,
				disabled: true,
				plateNum: '',
				platevalue: '',
				lists: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '否',
				a: '',
				local: "",
				list: [{
						id: 1,
						name: '外卖'
					},
					{
						id: 1,
						name: '快递'
					},
					{
						id: 1,
						name: '商务拜访'
					},
					{
						id: 1,
						name: '业主'
					},
					{
						id: 1,
						name: '家政'
					},
					{
						id: 1,
						name: '探访亲友'
					},
					{
						id: 1,
						name: '维修'
					},
					{
						id: 1,
						name: '装修'
					},
					{
						id: 1,
						name: '其他'
					},
				]

			};
		},
		methods: {
			backv(){
				this.flag = 0
				this.showx=true
			},
			inputs() {
				console.log(this.length)
				if (this.reson.length > 0) {
					this.disabled = false
				}
			},
			backs() {
				this.flag = 0
				this.disabled = true
			},
			kuaidichange(item) {
				for (var i in this.kuaidi) {

					if (this.kuaidi[i].id == item) {
						this.kuaidi[i].check = true
					} else {
						this.kuaidi[i].check = false
					}
				}
				this.disabled = false
			},
			wmchange(item) {
				console.log(item)
				for (var i in this.waimai) {

					if (this.waimai[i].id == item) {
						this.waimai[i].check = true
					} else {
						this.waimai[i].check = false
					}
				}
				this.disabled = false
			},
			changes(item) {
				console.log(item)
				this.namex=item
				if (item == '快递') {
					this.flag = 1
					this.disabled = true

				} else if (item == '外卖') {
					this.flag = 2
					this.disabled = true
					for (var i in this.waimai) {


						this.waimai[i].check = false

					}

				} else if (item == '其他') {
					this.reson = ''
					this.flag = 3

				} else {
					this.flag = 4
					this.resons = ''
					this.disabled = false
				}
			},
			//获取车牌
			getPlateNum(e) {

				this.platevalue = e

				console.log(this.platevalue.value)
			},
			radioChange(e) {
				console.log(e);
				console.log(this.value)
			},
			updateTime() {
				this.time = this.$u.timeFormat(Date.now(), 'yyyy-mm-dd hh:MM:ss')
			}

		},

		mounted() {
			this.updateTime(); // 初始化时间
			setInterval(this.updateTime, 1000); // 每秒更新时间
		},



		onLoad(option) {

this.mobile=uni.getStorageSync('phone')



			my.getLocation({
				type: 3, // 获取经纬度和省市区县数据
				success: (res) => {
					console.log(res)
					this.local = res.pois[0].name
					// this.local=res.streetNumbe.street+res.streetNumbe.number

					my.getAuthCode({
						scopes: 'auth_user',
						success: res => {
							const authCode = res.authCode;
							wxLogin({
								code: res.authCode,
								type: 2,
								proid:52
							}).then((rex) => {
								this.names=rex.data.userInfo.nick_name
								// console.log(rex.data.openidH5)
								// uni.setStorageSync('openidH5', rex.data.openidH5)
							})
							// 在服务端获取用户信息
							console.log(authCode)
						},
						fail: err => {
							console.log('my.getAuthCode 调用失败', err)
						}
					});


				},
				fail: (res) => {
					my.alert({
						title: '定位失败',
						content: JSON.stringify(res)
					});
				},
				complete: () => {},
			});
		},

		onShow() {

		},
			onHide: function() {
				console.log(777)
					clearTimeout()
				},
	}
</script>

<style lang="scss" scoped>
	.circle {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: #167BFF;
		margin-top: 80rpx;
	}

	.top {
		height: 409rpx;
		background: #167BFF;
		padding: 40rpx;

	}

	.columnx {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bracelet {
		width: 72rpx;
		height: 72rpx;
	}

	.bingding {
		width: 215rpx;
		height: 149rpx;
		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;

		background: #F6F6F6;
	}

	.bingdingx {
		width: 155rpx;
		height: 155rpx;

		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;

		background: #F6F6F6;
	}

	.bindx {
		width: 155rpx;
		height: 155rpx;

		border-radius: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;
		background: #F6F6F6;
		border: 1px solid cornflowerblue;
	}

	.box {
		background-color: white;
	}

	.op {
		position: relative;
		height: 100vh;
		padding: 30rpx;
	background: #167BFF;
	}
</style>